<template>
  <div class="">
    <Row>
        <Col span="12" class="title clearfix">促排卵</Col>   
   </Row>
    <div class="line"></div>
   	<div class="MainBox">
   		<Form :model="OvulationInduction" label-position="left" :label-width="50">
	        

	        <Form-item label="医院" class="clearfix" >
	            
	            	<Select v-model="OvulationInduction.hospital" style="float:left">
			      		 <Option v-for="item in hospitalList" :value="item.value" :key="item.value">{{ item.label }}</Option> 
			   		 </Select>
		   			 <!-- <Input v-model="OvulationInduction.hospital"  style="display:none" /> -->
	            
	        </Form-item>
	        
			<Form-item label="医生">
	            <Row>
	            	<Col span="16">
			            <Select v-model="OvulationInduction.doctor" >
				      				 <Option v-for="item in OvulationInduction.doctorList" :value="item.value" :key="item.value">{{ item.label }}</Option> 
				   		 </Select>
				   		  <Input v-model="OvulationInduction.doctor" style="display:none" />
	            	</Col>
	            	

	            	<Col span="6" offset="2">
	            		<Button  v-on:click="modalDoctor" style="background-color: rgb(209,68,100);color:white">添加</Button>
	            	</Col>

	            </Row>
	            <Modal title="添加医生" v-model="doctorVisible" @on-ok="addDoctor">
                   <input  v-model="addDoctorName" placeholder="请输入医生姓名"></input>
                </Modal>
		   		
	        </Form-item>

	      <!--   <Form-item label="促排个数" class="clearfix" >
	            <Input v-model="OvulationInduction.number"   />
	        </Form-item> -->
			<submit-button @submit="submit" @cancel="cancel"></submit-button>

	        <Row>
	        	<div class="clearfix" >
	        		<p style="float:left; margin-bottom:10px; margin-top:5px" >促排情况</p>
	        		<Button type="ghost" 
			        		style="float:right; margin-bottom:10px" 
			        		class="pinkButton" 
			        		size="small"
			        		@click="updateItem(-1)">新增</Button>
	        	</div>

	        </Row>


	        <Table border :columns="columns" :data="OvulationInduction.data" :key="" size="small" style="margin-bottom:15px;"></Table>


	        <Modal v-model="detailVisible" title="新增/修改促排详情">
	        		<ovulation-detail  
	        			ref="ovulationdetail"
		        		v-bind:isSave="changeIndex"
		        		v-bind:OvulationInduction ="OvulationInduction">
		        	</ovulation-detail>

		           	<div slot="footer">
		           		<Button type="ghost" class="pinkButton" size="small" @click="saveDetail" >保存</Button>
			            <Button type="ghost" size="small" @click="cancelDetail">取消</Button>
			        </div>
   			</Modal>

        </Form>


   	</div>
  </div>
</template>
<script>
import UploadHelper from '../components/UploadHelper'
import OvulationDetail from '../components/OvulationDetail'
import Store from '../store'
import SubmitButton  from "../components/SubmitButton"
import vuex_store from '../js/vuex-store'
import api from '../js/axios-module'

export default {


  data () {
    return {
    	number:2,
    	changeIndex:-1,
    	currentIndex:-1,
    	detailVisible:false,
    	addDoctorName:'',
    	doctorVisible:false,
    	OvulationInduction:{
    			hospital:'',
    			doctor:'',
    			number:0,
    			hospital:'',
    			leftText:"",
	    		leftItems:[],
	    		rightText:"",
	    		rightItems:[],
	    		doctorList:[],
    			data: []
    	},
        hospitalList:[
                    {
                        // value: 'hospital-san',
                        value: '三美泰',
                        label: '三美泰'
                    },
                    {
                        // value: 'hospital-bnh',
                        value: 'BNH',
                        label: 'BNH'
                    },
                    {
                        // value: 'hospital-lmj',
                        value: '拉玛九',
                        label: '拉玛九'
                    },
                    {
                        // value: 'hospital-pyt',
                        value: '帕亚泰',
                        label: '帕亚泰'
                    },
                    {
                        // value: 'hospital-wmc',
                        value: 'WMC',
                        label: 'WMC'
                    },
                    {
                        // value: 'hospital-kam',
                        value: '康民',
                        label: '康民'
                    },
                    {
                        // value: 'hospital-mgu',
                        value: '曼谷医院',
                        label: '曼谷医院'
                    },
                    {
                        // value: 'hospital-aoz',
                        value: '澳洲医院',
                        label: '澳洲医院'
                    }
                ],
       
        columns: [
            {	width:'70px',
                title: '监测日期',
                key: 'date'
            },
            {
                title: 'B超卵泡监测报告',
                key: 'picture',
                render: (h, params) => {
                	let children = []; 
			 		var list = params.row.rusultlist;
			 		// console.log(params)
			 		for(var i in list){
					  children.push(h('img', {
		                	    attrs:{
		                			src:baseURL+list[i].url
		                		},style: {
		                        	width: '52px',
									height: '52px',
									margin:  '1px',
		                        }
	            			},"")) 
					}

                return h('div', {},children);
              	}
            },
            {	width:'70px',
            	key:"detail",
                title: '查看详情',
                align: 'center',
                render: (h, params) => {
                	let children = [];
                	children.push(h('Button', {
                            props: {
                                type: 'ghost',
                                size: 'small'
                            },
                            class:['pinkButton'],
                            style: {
                            	'margin-Top': '5px',
                                'margin-Bottom': '5px',
                            },
                            on: {
                                click: () => {
                                   this.updateItem(params.index);
                                }
                            }
                        }, '查看'));



                    return h('div', {},children);
                }
            }
        ],
        
                
    }
 	},created: function () {

       //  var item = Store.fetch(Store.OVULATIONINDUCTION_KEY)

	      // if (item.data !=null) {
	      //   this.OvulationInduction = item
	      //   // item.data == []
	      // }else{
	      //   item.data = [];
	      //   item.leftItems = [];
	      //  	item. rightItems = [];
	      //   item.doctorList = [];
	      //   this.OvulationInduction = item  
	      // }   
            
            
    },components:{UploadHelper,OvulationDetail,SubmitButton}
  	,methods:{

  		getData:function(){

			api.getOvulation().then(response => {
				var model =response.data.data;
		        
				this.OvulationInduction.data = []
				this.OvulationInduction.doctorList = [];
		         this.OvulationInduction.doctorList.push({
		         	 value: model.doctors,
                     label: model.doctors
		         })



		        this.OvulationInduction.hospital = model.hospital
		        this.OvulationInduction.doctor =  model.doctors
		        var list = model.ovulation
		       	var pic = model.resource
		         for (var i = list.length - 1; i >= 0; i--) {

						if(list[i].date == null){continue}
		         		this.OvulationInduction.data.push({
		         			'ovulationid':list[i].id,
		         			"date":list[i].date,
		         			"rusultlist":pic[list[i]['id']],
		         			"leftItems":list[i].data[0],
		         			"rightItems":list[i].data[1]
		         		})
		         		
		         } 	

		        },err=>{

		            this.$Message.error('获取数据失败,请稍后再试');
		        })



  	},
  	modalDoctor:function(){
  		this.doctorVisible = true;
  	},
  	//增加医生
  	addDoctor:function(){
  	
  		// console.log(this.OvulationInduction.doctorList);
  		this.OvulationInduction.doctorList.push({
  			label : this.addDoctorName ,
  			value : this.addDoctorName 
  		})
  		this.addDoctorName  = ""
  	},
  	//更新item
  	updateItem:function(index){

  		this.detailVisible = true;
  		this.currentIndex = index;
		this.$refs.ovulationdetail.openItem(index)

  	},saveDetail:function(){
  		
		this.$refs.ovulationdetail.updateItem(this.currentIndex)
  		this.detailVisible = false;
  	},cancelDetail:function(){

  		this.detailVisible = false;

  	},submit:function(){
      	
      	var params = {
      		hospital:this.OvulationInduction.hospital,
      		doctorList:this.OvulationInduction.doctorList,
      		doctors:this.OvulationInduction.doctor
      	}

      	console.log(params)
      	api.setOvulationBase(params).then(response=>{

      		if(response.data.code==200){
      			this.$Message.success("提交成功")
      		}
      	},err=>{
				this.$Message.error("提交失败")
      	})

      Store.save(this.OvulationInduction,Store.OVULATIONINDUCTION_KEY);
    },
    cancel:function(){
      console.log("cancel")
    },
  },watch:{
  		OvulationInduction:{
	        handler:function(OvulationInduction){

	        	  Store.save(this.OvulationInduction,Store.OVULATIONINDUCTION_KEY);
	        },
	        deep:true
 		 }

	},mounted:function () {
    this.getData()
  },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>   /*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */

</style>